<!-- 售后订单 -->
<template>
	<view :class="isScroll?'box':''">
		<view class="top-box">
			<view class="top-list">
				<view class="tab-1" :class="searchIndex==index?'tab-1-active':''" v-for="(item,index) in searchList"
					:key="index" @click="search(index)">{{item}}</view>
			</view>
		</view>
		<view class="goods-list-box">
			<view class="order-list-1" v-for="(item,index) in afterSaleList" :key="index">
				<view class="order-list-info">
					<view class="order-shopname">
						<span class="shop-icon">
							<text>{{item.physical_name.substring(0,1)}}</text>
						</span>{{item.physical_name}}
					</view>
					<view class="order-stutas" v-if="item.refund_state=='1'">处理中</view>
					<view class="order-stutas" v-if="item.refund_state=='2'">待审核</view>
					<view class="order-stutas" v-if="item.refund_state=='3'">已完成</view>
					<view class="order-stutas" v-if="item.refund_state=='4'">已取消</view>
				</view>
				<view class="order-list-2">
					<view class="order-list-icon">
						<image :src="item.goods_image"></image>
					</view>
					<view class="order-info">
						<view class="order-name">{{item.goods_name}}</view>
						<view class="order-text-list">
							<view class="order-price">{{"¥"+item.refund_amount}}</view>
							<view class="order-count">{{"x"+item.goods_num}}</view>
						</view>
					</view>
				</view>
				<view class="order-text">售后类型：{{item.refund_type_txt}}</view>
				<view class="order-text">退货原因：{{item.reason_info}}</view>
				<view class="order-list-but">
					<view class="look-but-1" v-if="item.refund_state=='2'" @click="processOrder(item)">
						处理订单
					</view>
					<view class="look-but"  @click="checkOrder(item.refund_id)">
						查看订单
					</view>
				</view>
			</view>
		</view>
		<ProcessPop v-if="isShow1" @fnChange="closeProcess" :info="info"/>
	</view>
</template>

<script>
	import ProcessPop from '@/SupplyEnd/good/popup/processPop.vue'
	export default {
		components: {
			ProcessPop
		},
		data() {
			return {
				searchIndex: 0,
				searchList: ["全部", "待审核", "已完成"],
				type: 0,
				refund_type: 0, //申请类型
				curpage: 1, //当前页
				hasmore: false, //是否有下一页
				afterSaleList: [],
				isShow1:false,
				isScroll:false,
			}
		},
		onShow() {
			this.getAfterSaleList()
		},
		methods: {
			getAfterSaleList() { //获取售后列表
				let url = '';
				if (!uni.getStorageSync("key")) {
					return uni.redirectTo({
						url: "/SupplyEnd/login/login",
					});
				}
				url = "/mobile/index.php?act=supplier-refund&op=index";
				let that = this
				this.$util.request({
					url: url,
					method: 'get',
					data: {
						type: that.type,
						refund_type: that.refund_type,
						curpage: that.curpage
					}
				}).then(res => {
					if (res.error_code == 0) {
						//更新页面数据
						if(that.hasmore){
							that.afterSaleList = that.afterSaleList.concat(res.datas.list)
						}else{
							that.afterSaleList=[]
							that.afterSaleList=res.datas.list
						}
						that.hasmore = res.datas.paged.hasmore
						that.$set(that.afterSaleList)
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				})
			},
			search(index) { //点击筛选
				this.hasmore=true
				this.afterSaleList=[]
				this.searchIndex = index
				this.type=this.searchIndex
				this.getAfterSaleList()
			},
			checkOrder(id) {//查看订单
				uni.navigateTo({
					url: `/SupplyEnd/good/aftersalesDetails?refund_id=${id}`
				})
			},
			processOrder(item){//处理订单
				this.isShow1=true
				this.isScroll=true
				this.info=item
			},
			closeProcess(){
				this.isShow1=false
				this.isScroll=false
			},
		},
		onReachBottom() { //下拉加载
			if (this.hasmore == true) {
				uni.showLoading({
					title: "加载中"
				})
				this.curpage++
				this.getAfterSaleList()
			} else {
				uni.showLoading({
					title: "没有更多数据了",
					icon: "none",
					duration: 1000
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
			}
			setTimeout(() => {
				uni.hideLoading()
			}, 500)
		},
		onBackPress() {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			uni.navigateTo({
				url: "/SupplyEnd/taber/home"
			})
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F7F7F7;
	}
	.box{
		height: 1200rpx;
		overflow: hidden;
	}
	.top-box {
		position: fixed;
		top: 82rpx;
		/* #ifndef H5 */
		top: 0rpx;
		/* #endif */
		left: 0;
		right: 0;
		background: #FFFFFF;
		z-index: 99;

		.search-box {
			background: #FFFFFF;
		}

		.top-list {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 22rpx 44rpx;

			.tab-1 {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.tab-1-active {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #E96A1D;
				position: relative;
			}

			.tab-1-active::after {
				position: absolute;
				bottom: -4rpx;
				left: 20%;
				right: 20%;
				height: 2rpx;
				content: '';
				background: #E96A1D;
				border-radius: 6rpx;
			}
		}
	}


	.goods-list-box {
		padding: 130rpx 30rpx 30rpx;

		.order-list-1 {
			background-color: #FFF;
			border-radius: 5rpx 5rpx 5rpx 5rpx;
			display: flex;
			flex-direction: column;
			padding: 30rpx;
			position: relative;
			margin-bottom: 30rpx;

			.order-list-1-subscript {
				width: 130rpx;
				height: 130rpx;

				position: absolute;
				top: 0;
				left: 0;
				z-index: 9;
			}

			.order-list-info {
				display: flex;
				justify-content: space-between;

				.order-shopname {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
					display: flex;
					flex-direction: row;
					align-items: center;

					.shop-icon {
						width: 38rpx;
						height: 38rpx;
						background: linear-gradient(180deg, #EA8C1E 0%, #E84A1D 100%);
						opacity: 1;

						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;

						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 50%;
						margin-right: 10rpx;
					}
				}

				.order-stutas {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #E96A1D;
				}

				.order-stutas2 {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #323232;
				}
			}

			.order-list-2 {
				display: flex;
				margin-top: 20rpx;
				// padding-bottom: 30rpx;
				//border-bottom: 2rpx solid #EEEEEE;

				.order-list-icon {
					width: 200rpx;
					height: 200rpx;

					image {
						width: 200rpx;
						height: 200rpx;
						border-radius: 5rpx;
					}
				}

				.order-info {
					margin-left: 30rpx;
					position: relative;
					width: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.order-name {
						font-size: 28rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #323232;
					}

					.order-name-sp-list {
						.order-name-sp {
							height: 32rpx;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #909090;
						}
					}

					.order-text-list {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 13rpx;

						.order-price {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E96A1D;
						}

						.order-count {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}

					.order-text {
						position: absolute;
						bottom: 43rpx;
						left: 0;
						right: 0;
						display: flex;
						align-items: center;

						.order-price {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #E96A1D;
						}

						.order-score {
							font-size: 30rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #909090;
						}

						/deep/ .uni-rate {
							margin-top: 10rpx;
						}

						.order-score-icon {
							display: flex;
							align-items: center;
						}
					}

					.order-text2 {
						position: absolute;
						bottom: 0;
						left: 0;
						right: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.order-count {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}

						.order-num {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #323232;
						}
					}
				}
			}

			.order-text {
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;
				margin-bottom: 16rpx;
			}
		}

		.order-list-but {
			// margin-top: 20rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			border-top: 2rpx solid #EEEEEE;
			padding-top: 30rpx;

			.look-but-1 {
				width: 160rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;
				border: 2rpx solid #E96A1D;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #E96A1D;
			}

			.look-but {
				width: 160rpx;
				height: 70rpx;
				background: #FFFFFF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;
				border: 2rpx solid #323232;

				display: flex;
				align-items: center;
				justify-content: center;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;
				margin-left: 20rpx;
			}

			.grounding {
				display: flex;
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #323232;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

			.delete {
				width: 140rpx;
				height: 60rpx;
				background: #F7F7F7;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				opacity: 1;

				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #909090;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
</style>